import React, { useEffect, useState, useRef } from "react";
import {
    Map,
    Marker,
    InfoWindow,
    ZoomControl,
    AutoComplete,
} from "react-bmapgl";
import "./Addbuildingmap.scss";
function AddBuildingMap() {
    const [mapLng, setMapLng] = useState(0);
    const [mapLat, setMapLat] = useState(0);
    const [mapCity, setMySity] = useState("");
    const marker = useRef(null);
    const mapRef = useRef(null);
    const [mapInput, setMapInput] = useState("");
    let myValue;
    // 页面加载获取位置
    useEffect(() => {
        navigator.geolocation.getCurrentPosition((position) => {
            console.log(position, "position");
            setMapLng(position.coords.longitude);
            setMapLat(position.coords.latitude);
        });
        //获取 map 实例对象
        let map = mapRef.current.map;
        // const cityCtrl = new window.BMapGL.CityListControl();  // 添加城市列表控件
        // map.addControl(cityCtrl);
        // 流量图层
        map.setTrafficOn();
        // 城市名称
        setMySity(map.cityName);

        var locationControl = new window.BMapGL.LocationControl({
            // 控件基于停靠位置的偏移量（可选）
            offset: new window.BMapGL.Size(20, 20),
        });
        console.log(locationControl, "locationControl");
        map.addControl(locationControl);
    }, []);

    const setPlace = () => {
        // 获取 map 实例
        let map = mapRef.current.map;
        // let mar = marker.current.marker
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
            let pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            setMapLng(pp.lng);
            setMapLat(pp.lat);
            map.centerAndZoom(pp, 18);
        }
        let local = new window.BMapGL.LocalSearch(map, {
            //智能搜索
            onSearchComplete: myFun,
        });
        local.search(myValue);
    };

    // 搜索的方法
    // const searchInput = (myValue) => {
    //     let map = mapRef.current.map;
    //     // 详细地址框框
    //     map.centerAndZoom(new window.BMapGL.Point(mapLng, mapLat), 30);
    //     let local = new window.BMapGL.LocalSearch(map, {
    //         renderOptions: { map: map },
    //     });
    //     // 输入
    //     local.search(myValue);
    // };
    const [mapBorder, setMapBorder] = useState("#AEB2BB 1px solid");

    // 鼠标点击改变位置
    const handelClick = (e) => {
        console.log("鼠标点击事件", e);
    };
    return (
        <div className="ZxMap_box">
            <Map
                className="classMap"
                style={{ height: 250 }}
                center={new window.BMapGL.Point(mapLng, mapLat)}
                zoom={15}
                tilt={40}
                onClick={handelClick}
                ref={mapRef}
            >
                {/* <Marker ref={marker} autoViewport position={{ lng: mapLng, lat: mapLat }} /> */}
                {/* <InfoWindow position={{ lng: mapLng, lat: mapLat }} text="啊啊啊" title={business} /> */}
                {/* 地图放大缩小 */}
                <ZoomControl />
                {/* <input
                    id="zxMapInput"
                    style={{ border: mapBorder }}
                    onFocus={() => {
                        setMapBorder("#2285F0 1px solid");
                    }}
                    onBlur={() => {
                        setMapBorder("#AEB2BB 1px solid");
                    }}
                /> */}
                <AutoComplete
                    input="zxMapInput"
                    onConfirm={(e) => {
                        let _value = e.item.value;
                        console.log("选中的回调", e);
                        myValue =
                            _value.province +
                            _value.city +
                            _value.district +
                            _value.street +
                            _value.business;
                        // input里的值
                        setMapInput(myValue);
                        // 调用搜索的方法
                        // searchInput(myValue);
                        // 渲染地图
                        setPlace();
                    }}
                    onSearchComplete={(e) => {
                        setMapInput(e.keyword);
                    }}
                />
                {/* <button
                    className="ZxMap_box_button"
                    onClick={() => {
                        searchInput(mapInput);
                    }}
                >
                    搜索
                </button> */}
            </Map>
        </div>
    );
}

export { AddBuildingMap };
